<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Wavy Footer</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        min-height: 100vh;
        background: #ccd6a6;
      }

      footer {
        position: relative;
        width: 100%;
        background: #866a7f;
        min-height: 100px;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      footer .social_icon,
      footer .menu {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        flex-wrap: wrap;
      }

      footer .social_icon li,
      footer .menu li {
        list-style: none;
      }

      footer .social_icon li a {
        font-size: 2em;
        color: #fff;
        margin: 0 10px;
        display: inline-block;
        transition: 0.5s;
      }

      footer .social_icon li a:hover {
        transform: translateY(-10px);
      }

      footer .menu li a {
        font-size: 1.2em;
        color: #fff;
        margin: 0 10px;
        display: inline-block;
        text-decoration: none;
        opacity: 0.75;
      }

      footer .menu li a:hover {
        opacity: 1;
      }

      footer p {
        color: #fff;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 1.1em;
      }

      footer .wave {
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: 100px;
        background-image: url('../images/Waves.png');
        background-size: 1000px 100px;
      }

      footer .wave#wave1 {
        z-index: 1000;
        opacity: 1;
        bottom: 0;
        animation: animateWave 4s linear infinite;
      }

      footer .wave#wave2 {
        z-index: 999;
        opacity: 0.5;
        bottom: 10px;
        animation: animateWave_02 4s linear infinite;
      }

      footer .wave#wave3 {
        z-index: 1000;
        opacity: 0.2;
        bottom: 15px;
        animation: animateWave 4s linear infinite;
      }

      footer .wave#wave4 {
        z-index: 999;
        opacity: 0.7;
        bottom: 20px;
        animation: animateWave_02 4s linear infinite;
      }

      @keyframes animateWave {
        0% {
          background-position-x: 1000px;
        }
        100% {
          background-position-x: 0px;
        }
      }
      @keyframes animateWave_02 {
        0% {
          background-position-x: 0px;
        }
        100% {
          background-position-x: 1000px;
        }
      }
    </style>
  </head>
  <body>
    <footer>
      <div class="waves">
        <div class="wave" id="wave1"></div>
        <div class="wave" id="wave2"></div>
        <div class="wave" id="wave3"></div>
        <div class="wave" id="wave4"></div>
      </div>
      <ul class="social_icon">
        <li>
          <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
        </li>
        <li>
          <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
        </li>
        <li>
          <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
        </li>
        <li>
          <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
        </li>
      </ul>

      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blogs</a></li>
        <li><a href="#">Services</a></li>
      </ul>
      <p>© Wavy Footer 2023 | All Right Reserved</p>
    </footer>

    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
